<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleSave"
          >保存</el-button
        >
      </el-col>
    </el-row>
    <div>
      <el-form
        :model="data"
        ref="factoryDoorForm"
        class="data-form"
        :row-key="id"
      >
        <el-table
          v-loading="loading"
          border
          :data="data.coefficientList"
          :header-cell-class-name="must"
        >
          <el-table-column
            label="序号"
            width="60"
            type="index"
            align="center"
          />
          <el-table-column
            label="幅宽"
            min-width="120"
            align="center"
            prop="longWide"
          >
            <template #default="scope">
              <span v-if="scope.row.edit === false">
                <el-form-item
                  :prop="'coefficientList.' + scope.$index + '.longWide'"
                  :rules="[
                    {
                      required: true,
                      message: '幅宽',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    type="number"
                    v-model="scope.row.longWide"
                    placeholder="请输入幅宽"
                  ></el-input>
                </el-form-item>
              </span>
              <span v-if="scope.row.edit === true">
                {{ scope.row.longWide }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="克重"
            min-width="120"
            align="center"
            prop="weight"
          >
            <template #default="scope">
              <span v-if="scope.row.edit === false">
                <el-form-item
                  :prop="'coefficientList.' + scope.$index + '.weight'"
                  :rules="[
                    {
                      required: true,
                      message: '克重',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input
                    type="number"
                    v-model="scope.row.weight"
                    placeholder="请输入克重"
                  ></el-input>
                </el-form-item>
              </span>
              <span v-if="scope.row.edit === true">
                {{ scope.row.weight }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="车间"
            align="center"
            min-width="120"
            prop="workshopId"
          >
            <template #default="scope">
              <span v-if="scope.row.edit === false">
                <el-form-item
                  :prop="'coefficientList.' + scope.$index + '.workshopId'"
                  :rules="[
                    {
                      required: true,
                      message: '车间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-select
                    style="width: 100%"
                    v-model="scope.row.workshopId"
                    placeholder="请选择车间"
                  >
                    <el-option
                      v-for="item in ems_workshop"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </span>
              <span v-else>
                <dict-tag
                  :options="ems_workshop"
                  :value="scope.row.workshopId"
                />
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="系数"
            min-width="120"
            align="center"
            prop="tonnageCoefficient"
          >
            <template #default="scope">
              <span v-if="scope.row.edit === false">
                <el-form-item
                  :prop="
                    'coefficientList.' + scope.$index + '.tonnageCoefficient'
                  "
                  :rules="[
                    {
                      required: true,
                      message: '系数',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-input
                    type="number"
                    v-model="scope.row.tonnageCoefficient"
                    placeholder="请输入系数"
                  ></el-input>
                </el-form-item>
              </span>
              <span v-if="scope.row.edit === true">
                {{ scope.row.tonnageCoefficient }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="120"
            align="center"
            :show-overflow-tooltip="true"
            prop="remark"
          >
            <template #default="scope">
              <span v-if="scope.row.edit === false">
                <el-form-item>
                  <el-input
                    v-model="scope.row.remark"
                    placeholder="请输入备注"
                  ></el-input>
                </el-form-item>
              </span>
              <span v-if="scope.row.edit === true">
                {{ scope.row.remark }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="150"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="修改" placement="top" v-if="scope.row.id">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row, scope.$index)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Delete"
                  @click="handleDelete(scope.row, scope.$index)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import {
  mestonnageList,
  mestonnageSave,
  mestonnageDel,
} from "@/api/basicInfo/coefficient";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dataList = ref([]);
const showSearch = ref(true);
const total = ref(0);
const router = useRouter();
const factoryDoorForm = ref(null);
const tableRowEditId = ref(null);
const { ems_workshop } = proxy.useDict("ems_workshop");

const selectCarTypes = ref([]);

const must = (obj) => {
  let mustColumns = [1, 2, 3, 4];
  if (mustColumns.includes(obj.columnIndex)) {
    return "must";
  }
};

const data = reactive({
  coefficientList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 100,
  },
});
const { queryParams, coefficientList, rules } = toRefs(data);

const getList = () => {
  loading.value = true;
  mestonnageList(queryParams.value)
    .then((res) => {
      loading.value = false;
      coefficientList.value = res.rows;
      total.value = res.total;
    })
    .catch((err) => {
      loading.value = false;
    });
};

// 新增
const handleAdd = () => {
  coefficientList.value.unshift({
    state: "1", //修改状态 1:新增 2:修改 3:删除
    edit: true,
  });
  //新增行可编辑
  data.coefficientList[0].edit = false;
};

const handleSave = async () => {
  try {
    await factoryDoorForm.value.validate();
    await mestonnageSave(coefficientList.value);
    ElMessage({
      message: "编辑成功",
      type: "success",
    });
    getList();
  } catch (error) {}
};

// 编辑
const handleUpdate = (row, index) => {
  console.log(row);
  console.log(index);
  console.log(coefficientList.value[index]);
  coefficientList.value[index].state = "2";
  coefficientList.value[index].edit = false;
};

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};
/** 删除按钮操作 */
const handleDelete = (row, index) => {
  console.log(row);
  console.log(index);
  proxy.$modal
    .confirm('是否确认删除"' + row.longWide + '"的数据项？')
    .then(function () {
      if (row.id) {
        return mestonnageDel(row.id);
      } else {
        coefficientList.value.splice(index, 1);
      }
    })
    .then(() => {
      if (row.id) {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }
    })
    .catch(() => {});
};

getList();
</script>

<style lang="scss" scoped>
.footer {
  text-align: center;
}

:deep(.el-pagination) {
  position: unset;
}

.order-form :deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-table th.must div:before) {
  content: "*";
  color: #ff1818;
}

:deep(.el-table) .success-row {
  background: #dae5f4 !important;
}
</style>
